<template>
  <div
    style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center"
  >
    <el-progress
      :type="componentProps.type"
      :percentage="componentProps.percentage"
      :status="componentProps.status"
      :stroke-width="componentProps.strokeWidth"
      :text-inside="componentProps.textInside"
      :width="
        componentProps.type === 'circle' || componentProps.type === 'dashboard'
          ? componentProps.width
          : undefined
      "
      :show-text="componentProps.showText"
      :color="componentProps.color"
      :format="formatText"
      :style="getProgressStyle()"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { ElProgress } from 'element-plus';
import { useAutoDataBinding } from '@/composables/use-data-binding';
import type { IDataBindingConfig } from '@/components/mt-edit/store/types';

const props = defineProps({
  // 数据绑定配置
  dataBinding: {
    type: Object as () => IDataBindingConfig,
    default: () => ({
      enabled: false,
      sourceId: '',
      dataPointId: '',
      targetProperty: 'percentage',
      transform: 'number',
      defaultValue: '0',
      updateInterval: 0
    })
  },
  type: {
    type: String as () => 'line' | 'circle' | 'dashboard',
    default: 'line'
  },
  percentage: {
    type: Number,
    default: 50
  },
  status: {
    type: String as () => 'success' | 'exception' | 'warning' | '',
    default: ''
  },
  strokeWidth: {
    type: Number,
    default: 6
  },
  textInside: {
    type: Boolean,
    default: false
  },
  width: {
    type: Number,
    default: 126
  },
  showText: {
    type: Boolean,
    default: true
  },
  color: {
    type: String,
    default: '#409eff'
  },
  customText: {
    type: String,
    default: ''
  }
});

// 响应式属性对象（用于数据绑定）
const componentProps = ref({
  type: props.type,
  percentage: props.percentage,
  status: props.status,
  strokeWidth: props.strokeWidth,
  textInside: props.textInside,
  width: props.width,
  showText: props.showText,
  color: props.color,
  customText: props.customText
});

// 使用数据绑定
const shouldUseDataBinding =
  props.dataBinding && props.dataBinding.enabled && props.dataBinding.targetProperty !== 'hide';
const dataBinding = useAutoDataBinding(
  shouldUseDataBinding ? props.dataBinding : null,
  componentProps.value,
  (property: string, value: any) => {
    // 直接更新响应式对象的属性
    if (componentProps.value.hasOwnProperty(property)) {
      (componentProps.value as any)[property] = value;
    }
  }
);

// 监听 dataBinding 配置变化
watch(
  () => props.dataBinding,
  (newConfig, oldConfig) => {
    // dataBinding配置变化处理
  },
  { deep: true }
);

// 监听props变化，同步到响应式属性对象
watch(
  () => props.type,
  (newValue) => {
    componentProps.value.type = newValue;
  }
);
watch(
  () => props.percentage,
  (newValue) => {
    if (!props.dataBinding?.enabled) {
      componentProps.value.percentage = newValue;
    }
  }
);
watch(
  () => props.status,
  (newValue) => {
    componentProps.value.status = newValue;
  }
);
watch(
  () => props.strokeWidth,
  (newValue) => {
    componentProps.value.strokeWidth = newValue;
  }
);
watch(
  () => props.textInside,
  (newValue) => {
    componentProps.value.textInside = newValue;
  }
);
watch(
  () => props.width,
  (newValue) => {
    componentProps.value.width = newValue;
  }
);
watch(
  () => props.showText,
  (newValue) => {
    componentProps.value.showText = newValue;
  }
);
watch(
  () => props.color,
  (newValue) => {
    componentProps.value.color = newValue;
  }
);
watch(
  () => props.customText,
  (newValue) => {
    componentProps.value.customText = newValue;
  }
);

const formatText = (percentage: number) => {
  return componentProps.value.customText || `${percentage}%`;
};

const getProgressStyle = () => {
  if (componentProps.value.type === 'line') {
    return { width: '100%' };
  }
  return {};
};
</script>
